{% extends "base.html" %}
{% load cctags %}
{% load ccfilters %}

{% block css %}
<link type="text/css" rel="stylesheet" href="/static/styles/jqueryui/themes/base/jquery.ui.all.css"/>
<link type="text/css" rel="stylesheet" href="/static/styles/routes.css"/>
<style type="text/css">
div#routes_search{
    display: none;
}
</style>
{% endblock %}

{% block scripts %}
{% if option.enable_gmap %}
<script type="text/javascript" src="/static/js/highcharts.js"></script>
<script type="text/javascript" src="/static/js/json2.js"></script>
{% if site_settings.development %}
    <script type="text/javascript" src="/static/js/jqueryui/jquery-ui-1.8.13.custom.min.js"></script>
{% else %}
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js"></script>
{% endif %}
<script type="text/javascript" src="{% url views.localjavascript 'jquery.magicmap2.js' %}"></script>
<script type="text/javascript" src="/static/js/loadgpx.js"></script>
<script type="text/javascript" src="/static/js/geoxml3.js"></script>
<script type="text/javascript" src="/static/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="/static/js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#tabs").tabs();

    $.ajaxSetup({
        timeout: 300000
    });

    // map callbacks
    var comment_latlng;
    function map_click_callback(latlng){
        comment_latlng = latlng;
        // add commont
        show_add_comment_panel();
    };
    function elevations_callback(elevationResult){
        if (!elevationResult){
            $("#elevation_fieldset").hide();
            return;
        }
        var unit_str = mmap.get_unit_str(1);
        var elevations_stats = mmap.calc_elevations(elevationResult);

        $("#start_elevation").html(elevations_stats.start.toFixed(0) +' '+ unit_str);
        $("#end_elevation").html(elevations_stats.end.toFixed(0) +' '+ unit_str);
        $("#max_elevation").html(elevations_stats.highest.toFixed(0) +' '+ unit_str);
        $("#up_down").html("+" + elevations_stats.up.toFixed(0) + "/" + elevations_stats.down.toFixed(0) +' '+ unit_str);
    };

    //init google map
    var option = { mapTypeId: google.maps.MapTypeId.TERRAIN,
               zoom: 4,
        {% ifequal unit.unit "imperial" %}
               unit: google.maps.DirectionsUnitSystem.IMPERIAL
        {% else %}
               unit: google.maps.DirectionsUnitSystem.METRIC
        {% endifequal %}
    };
    var mmap = new $.magicmap(option);
    var map_container = $("#routes_map_container");
    uicontrols = { map_container: map_container};
    mmap.initmap( {startcenter: $.magicmap.get_location_by_lang()}, uicontrols);

    // show comments
    {% for comment in route.Comments %}
        {% if comment.location %}
            mmap.show_comment({id: {{ comment.id }},
                        routeid: {{ route.id }},
                        location: new google.maps.LatLng({{ comment.location.lat }}, {{ comment.location.lon }}),
                        posted_on: '{{ comment.posted_on.isoformat|escapejs }}',
                        photourl: '{{ comment.photourl|escapejs }}',
                        reviewer: '{{ comment.reviewer.name|escapejs }}',
                        reviewer_photourl: '{{ comment.reviewer.photourl|escapejs }}',
                        reviewer_uid: '{{ comment.reviewer.uid|escapejs }}',
                        review: '{{ comment.review|escapejs }}',
                        category: '{{ comment.category|escapejs }}'
                    }, '{{ user.uid }}');
        {% endif %}
    {% endfor %}

    // show directions
    map_container.block({message: '<p><img width="16" height="16" src="/static/images/loading.gif" /> {% _ "Getting Route Info" %}...</p>'});
    {% ifequal route.route_type "gmap" %}
    $.post("{% url apis.apisviews.rest %}",
            {method:"get_directions_by_id",
             id: {{ route.directions_store.id }}
            },
            function(data){
                data = _US(data);
                map_container.unblock();
                if (data.status=="ok") {
                    mmap.enable_show_route_mode({callback: map_click_callback}, $("#details_directions") );
                    mmap.enalbe_elevations({callback: elevations_callback}, $("#routes_map_elevation_chart") );
                    var directions = _US(data.directions);

                    for(var p in directions){
                        if(directions[p].hasOwnProperty("travelMode") == true){
                            for(var i=0;i<25;i++) {
                                for(var j=0;j<25;j++) {
                                    var _name = String.fromCharCode(65+i, 97+j);
                                    directions[_name] = directions[p];
                                    _name = String.fromCharCode(97+i, 65+j);
                                    directions[_name] = directions[p];
                                }
                            }
                            break;
                        }
                    }
                    mmap.set_directions(directions);
                } else {
                    map_container.block({message: '<p>{% _ "##Error MSG##" %} : {0}</p>'.format(data.message)});
                }
            }
    );
    {% else %}
    var _show_elevations = function(parser){
        var total_distance = parser.getDistance();
        var elevations = parser.getElevations();
        if (elevations.length>0){
            mmap.show_elevations_chart(elevations, total_distance);
        } else {
            $.growlUI('{% _ "No Valid Elevation" %}','{% _ "Get elevations from Google" %}', 4000);
            var overview_path = parser.getOverviewPath(total_distance);
            mmap.show_elevations_from_google(overview_path, total_distance);
        }
    }

    var parser = null;
    var _show_kml = function(filename, str){
        parser = new geoXML3.parser({map: mmap.gmap()});
        parser.parse(filename, null, str);

        return parser.hasRoute();
    }
    var _show_gpx = function(filename, str){
        parser = new GPXParser(null, mmap.gmap());
        parser.setxmlstr(str);
        parser.centerAndZoom();
        parser.addWaypointsToMap();
        parser.addTrackpointsToMap();
        parser.addRoutepointsToMap();
        return parser.hasRoute();
    }
    var show_route_from_url = function(url){
        $.ajax({
            url: url,
            dataType: "text",
            success: function(data, status, xhr){
                map_container.unblock();
                var file_type = xhr.getResponseHeader("content-type") || "xml";
                var result = false;
                if (file_type == "application/vnd.google-earth.kml+xml"){
                    result =_show_kml(url, data);
                    result = result || _show_gpx(url, data);
                } else {
                    result = _show_gpx(url, data);
                    result = result || _show_kml(url, data);
                }
                if(result){
                    mmap.enable_show_route_mode({callback: map_click_callback}, $("#details_directions") );
                    mmap.enalbe_elevations({callback: elevations_callback}, $("#routes_map_elevation_chart") );
                    _show_elevations(parser);
                    mmap.gmap().setMapTypeId(google.maps.MapTypeId.HYBRID);
                } else {
                    map_container.block({message: '<p>{% _ "There is no Route in this file." %}</p>'});
                }
            },
            error: function(){
                map_container.block({message: '<p>{% _ "File download error" %}</p>'});
            },
            timeout: 300000 //300 second timeout
        });
    };
    show_route_from_url('{{route.file_url}}');
    {% endifequal %}

    // add comment
    var add_comment_panel = $("#add_comment_panel");
    var comment_title = $("#comment_title");
    var word_count_left = $("#word_count_left");
    var btn_save_comment = $("#save_comment");
    var btn_cancel = $("#cancel");
    var textarea_comment = $("#comment");
    textarea_comment.maxlength = 140;
    var add_photo_button = $("#add_photo_button");
    var add_photo_input = $("#add_photo_input");

    var photo_url = $("#photo_url");
    var signature = $("#signature");
    var photo_img = $("#photo_img");

    function show_add_comment_panel(){
        disable_button(btn_save_comment);
        comment_title.html("{% _ "Add a Marker" %}@(" + comment_latlng.lat().toFixed(4) +
        "," + comment_latlng.lng().toFixed(4) + ")");
        map_container.block({
            message: add_comment_panel,
            centerY: false,
            css: { width: add_comment_panel.width()+'px',padding: '6px',top: '20px'}
        });
        textarea_comment.focus();
        word_count_left.html(textarea_comment.maxlength - textarea_comment.val().length);
    };
    function enable_button(btn){
        btn.removeClass("disabled");
        btn.attr("disabled", false);
    };
    function disable_button(btn){
        btn.addClass("disabled");
        btn.attr("disabled", true);
    };
    function reset_photo(){
        photo_img.attr("src","/static/images/uploading.gif");
        photo_img.hide();
    }
    function reset_upload(){
        add_photo_input.val("");
        photo_url.val("");
    }
    function reset_comment(){
        textarea_comment.val("");
        reset_upload();
        reset_photo();
    }

    textarea_comment.keyup(function(e){
        if (e.keyCode != 9) {//no tabulation as it changes focus
            val = $.trim(textarea_comment.val());
            if ((val.length > 0) && (val.length <= textarea_comment.maxlength)){
                enable_button(btn_save_comment);
            } else {
                disable_button(btn_save_comment);
            }
            word_count_left.html(textarea_comment.maxlength - val.length);
        }
    });

    btn_cancel.click(function(){
        map_container.unblock();
        reset_upload();
        reset_photo();
        uplpoad_request && uplpoad_request.abort();
    });

    btn_save_comment.click(function(){
        add_comment_panel.parent().block({message: '<p><img src="/static/images/loading.gif" /> {% _ "Saving" %}...</p>'});
        $.post("{% url apis.apisviews.rest %}",
                {method:"add_comment",
                 routeid: {{ route.id }},
                 review:  $.trim(textarea_comment.val()).replace("/(\r)|(\n)/g", " "),
                 photourl: photo_url.val(),
                 category: $('input[name="category"]:checked').val(),
                 location: _S(comment_latlng)
                },
                function(data){
                    add_comment_panel.parent().unblock();
                    data = _US(data);
                    if (data.status=="ok") {
                        reset_comment();
                        $.growlUI('{% _ "Marker Saved" %}',' ');
                        mmap.show_comment(data.comment, '{{ user.uid }}');
                        map_container.unblock();
                    } else {
                        alert(data.message);
                    }
        });
    });

    add_photo_button.click(function(){
        add_photo_input.toggle();
    });

    // upload photo
    add_photo_input.change( function() {
        if (! add_photo_input.val() ){
            return false;
        }
        if (!check_file_ext(add_photo_input.val())) {
            alert("{% _ 'unsupported file type' %}!");
            add_photo_input.val("");
            return false;
        }
        if ($.browser.msie){
            check_file_size_ie(add_photo_input, upload_file);
        } else {
            if (!check_file_size(add_photo_input)) {
                alert("{% _ 'file size exceed' %}! {{ site_settings.upload_photo_limit|divide:"1048576"|floatformat:"1" }} M");
                add_photo_input.val("");
                return false;
            }
            upload_file();
        }
    });
    function check_file_ext(filename) {
        var accepted_exts = "jpg,png,gif,jpeg,tiff,ico,bmp,jpe";
        filename = filename.split('.');
        var ext = filename[filename.length-1].toLowerCase();
        return accepted_exts.indexOf(ext) >= 0;
    };
    function check_file_size(file_input) {
         return (file_input[0].files[0].size < {{ site_settings.upload_photo_limit }})
    };
    function check_file_size_ie(file_input, callback){
        if ($.browser.msie){
            /*var ie_size_checker = document.getElementById("ie_size_checker");
            if(ie_size_checker){
                $(ie_size_checker).remove();
            }
            $("body").append('<img id="ie_size_checker" style="dispaly:none"/>')
            ie_size_checker = document.getElementById("ie_size_checker");
            ie_size_checker.src =  file_input.val();
            $(ie_size_checker).ready(function(){
                if (ie_size_checker.readyState == "complete"){
                    var filesize = ie_size_checker.fileSize;
                    if (filesize >= {{ site_settings.upload_photo_limit }}){
                       alert("{% _ 'file size exceed' %}! {{ site_settings.upload_photo_limit|divide:"1048576"|floatformat:"1" }} M");
                    } else {
                        callback();
                    }
                }
            });*/
            callback();
        }
    }

    function on_upload_error(message) {
        uplpoad_request && uplpoad_request.abort();
        alert(message);
        disable_button(btn_save_comment);
        reset_photo();
        reset_upload();
    };

    var uplpoad_request = null;
    function upload_file(){
        var sign = "";
        disable_button(btn_save_comment);
        reset_photo();
        photo_img.show();
        uplpoad_request = $.getJSON("{{site_settings.host_site}}/apis/rest/?method=get_upload_signature&callback=?",
                function(data){
                    if (data.status=="ok") {
                        sign = data.signature;
                        _upload(sign);
                    } else {
                        on_upload_error(data.message);
                    }
                }
        );

        var _upload = function(sign) {
            signature.val(sign);
            var getuploadurl = "{{site_settings.depot_site}}/getuploadurl/?signature=" + sign +
                    "&host="+ encodeURI("{{site_settings.host_site}}/apis/rest/");
            uplpoad_request = $.getScript(getuploadurl, function() {  //server response result,uploadurl,message
                if (result=="ok"){
                    var upload_form = $("#photo_upload_form")[0];
                    upload_form.action = uploadurl;
                    upload_form.submit();

                    var check_url = "{{site_settings.depot_site}}/getphotourl/"+sign;
                    var start_time = new Date();
                    var timeout = 3*60000;
                    var interval_control;
                    var running = false;

                    _check_result = function(){
                        if (running){ return; }
                        running = true;
                        uplpoad_request = jQuery.getScript(check_url,
                            function() {
                                if (result=="ok"){
                                    //photourl from server reponse
                                    clearInterval(interval_control);
                                    $("#photo_url").val(photourl);
                                    $("#photo_img").attr("src",photourl);
                                    enable_button(btn_save_comment);
                                    return;
                                } else {
                                    running = false;
                                }
                                var now = new Date();
                                if((now - start_time) > timeout){
                                    clearInterval(interval_control);
                                    alert('{% _ "upload error" %}');
                                    $.unblockUI();
                                }
                                running = false;
                            }
                        );
                    }
                    interval_control = setInterval("_check_result();", 3000);
                } else {
                    on_upload_error(message);
                }
            });
            return false;
        };

        var getphotourl = function(sign) {
            uplpoad_request = jQuery.getScript("{{site_settings.depot_site}}/getphotourl/"+sign,
                    function() {
                        if (result=="ok"){
                            //photourl from server reponse
                            $("#photo_url").val(photourl);
                            $("#photo_img").attr("src",photourl);
                            enable_button(btn_save_comment);
                        } else {
                            on_upload_error("{% _ 'get photo error' %}");
                        }
                    }
            );
        };
    }

    // priview route images
    $("img.preview_img").preview();


    var liketodo = $("#liketodo");
    liketodo.click(function(){
        $.post("{% url apis.apisviews.rest %}",
                {method:"add_favorite_route",
                 routeid: {{ route.id }}
                },
                function(data){
                    data = _US(data);
                    if (data.status=="ok") {
                        $("span",liketodo).html(" {% _ 'Like' %} ("+data.route.fav_count+")");
                        liketodo.addClass("disabled");
                        
                        $.growlUI('{% _ "Route added into your Favorites" %}',' ');
                    } else {
                        alert(data.message);
                    }
        });
    });

    var more_rides = $("#more_rides");
    more_rides.click(function(){
        $.post("{% url apis.apisviews.rest %}",
                {method:"get_rides_by_routeid",
                 start_cursor: $("#rides_cursor").val(),
                 routeid: {{ route.id }},
                 pagesize: {{ pagesize }}
                },
                function(data){
                    data = _US(data);
                    if (data.status=="ok") {
                        $("#rides_cursor").val(data.end_cursor);
                        var count = data.rides.length;
                        if(count==0){
                            $.growlUI(' {% _ "No More Rides" %}',' ');
                            more_rides.hide();
                            return;
                        }
                        for(var i=0; i<count; i++){
                            _insert_ride_to_list(data.rides[i]);
                        }
                        $.growlUI(count + ' {% _ "Rides Loaded" %}',' ');
                    } else {
                        alert(data.message);
                    }
        });
        _insert_ride_to_list = function(ride){
            $("#ride_"+ride.id).remove();
            var ride_li = $('<li class="ride"><a id="ride_name">' + ride.name + '</a> -- <a id="ride_rider">'+
            ride.rider + '</a></li>');
            ride_li.attr("id", "ride_"+ride.id);
            $("#ride_name", ride_li).attr("href","/rides/"+ride.id);
            $("#ride_rider", ride_li).attr("href","/riders/"+ride.rider_uid);
            ride_li.insertBefore($("#more_rides_li"));
        };
    });
});
</script>
{% endif %}
{% endblock %}

{% block menu %}
{% include '_menu_routes.html' %}
{% endblock %}

{% block main-page %}
<div id="show_route">
    <div id="route_left">
        <div id="route_title">
            <div class="preview_map">
                <a href="{% url routes.routesviews.showroute route.id %}">
                    <img class="preview_img" src="{{ route.preview_url|safe }}" title="{{ route.name }}"/></a>
            </div>
            <div class="distance">
                <span class="value">{{ route.distance|divide:"1000"|_u|floatformat:"0" }}</span>
                <span class="unit">{{ unit.km_mile }}</span>
            </div>
            <div class="title_container">
                <span class="route_name"><a href="{% url routes.routesviews.showroute route.id %}">{{ route.name }}</a>
                </span>
                <span>
                    {% _ "By" %} 
                    <a href="{% url riders.ridersviews.userpage route.Creator.uid %}"
                            title="{{route.Creator.name}}">{{route.Creator.name}}</a>
                    {% _ "Created on" %}
                    {{ route.create_datetime|cctimesince }} {% _ "ago" %}
                </span>
                <span class="route_location">{{ route.start_address }}</br> {% _ "to" %} {{ route.end_address }}</span>
            </div>
        </div>
        <div class="clear"></div>
        <div class="tips">
            <div class="tips_content">
                <ul>
                    <li>{% _ "Right click map to add a marker" %}</li>
                    <li>{% _ "You can drag your marker by left mouse" %}</li>
                </ul>
            </div>
            <a class="close" onclick="this.parentNode.style.display='none';return false;" href="javascript:void(0);">x</a>
        </div>
		{% include '_base_routes_map.html' %}
    </div>
    <div id="route_right">
        <div id="cmds">
            <a id="hava_done" class="greenbutton size140" href="{% url routes.ridesviews.logride route.id %}">
                <img src="/static/images/done.png"/><span>{% _ 'Have Done' %} ({{ route.Stats.rides_count }})</span></a>
            <a id="liketodo" class="yellowbutton size140 {%if route.id in user.favorite_routes %}disabled{% endif %}"
               href="javascript:;"><img src="/static/images/like.png"/><span> {% _ 'Like' %} ({{ route.Stats.fav_count }})</span></a>
            {% if route.route_type != 'gmap' %}
            <a id="download_kml" class="bluebutton" target="_blank" href="{{ route.file_url }}">
                <img src="/static/images/{{ route.route_type }}.png" width="20" height="20"/>
                <span>{% _m 'Download %0 File' route.route_type.upper %}</span>
            </a>
            {% endif %}
        </div>
        <div id="tabs">
            <ul>
                <li><a href="#info">{% _ "Route Info" %}</a></li>
                {% if route.route_type == 'gmap' %}
                <li><a href="#details">{% _ "Path" %}</a></li>
                {% endif %}
                <li><a href="#social_comments">{% _ "Comments" %}</a></li>
            </ul>
            <div id="info">
                 <fieldset id="elevation_fieldset">
                     <legend>{% _ "Elevations" %}</legend>
                     <table id="route_info_table">
                         <tr>
                             <th scope="row">{% _ "Start" %}:</th>
                             <td id="start_elevation"></td>
                         </tr>
                         <tr>
                             <th scope="row">{% _ "End" %}:</th>
                             <td id="end_elevation"></td>
                         </tr>
                         <tr>
                             <th scope="row">{% _ "Max" %}:</th>
                             <td id="max_elevation"></td>
                         </tr>
                         <tr>
                             <th scope="row">{% _ "Up/Down" %}:</th>
                             <td id="up_down"></td>
                         </tr>
                     </table>
                </fieldset>
                <fieldset>
                    <legend>{% _ "Rides" %}({{ route.Stats.rides_count }})</legend>
                    <div class="r_row"><input type="hidden" id="rides_cursor" value=""/>
                        <ul id="rides_list">
                        {% for ride in route.LatestRides %}
                            <li class="ride" id="ride_{{ ride.id }}">
                                <img class="tab_img" src="/static/images/rides.png"/>
                                <a href="{% url routes.ridesviews.showride ride.id %}"
                                                    title="{{ride.name}}">{{ ride.name }}
                                </a> --
                                <a href="{% url riders.ridersviews.userpage ride.rider.uid %}"
                                                    title="{{ride.rider.name}}">{{ride.rider.name}}
                                </a>
                            </li>
                            {% if forloop.counter == pagesize %}
                            <li id="more_rides_li">
                                <a id="more_rides" href="javascript:;" class="yellowbutton smallsize">{% _ "More..." %}</a>
                            </li>
                            {% endif %}
                        {% endfor %}
                        </ul>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>{% _ "Routes Nearby" %}</legend>
                    <div class="routes_container">
                    {% for r in route.NearbyRoutes %}
                        {% ifnotequal r.id route.id %}
                            <div class="r_row" >
                                <div class="preview_map">
                                    <a href="{% url routes.routesviews.showroute r.id %}">
                                        <img class="preview_img" src="{{ r.preview_url|safe }}" title="{{ r.name }}"/>
                                    </a>
                                </div>
                                <div class="r_name">
                                    <p>
                                        <a href="{% url routes.routesviews.showroute r.id %}">{{ r.name }}</a>
                                        {{ r.distance|divide:"1000"|_u|floatformat:"0" }} {{ unit.km_mile }}
                                    </p>
                                    <p>
                                        {% _ "By" %}
                                        <a href="{% url riders.ridersviews.userpage r.Creator.uid %}"
                                                title="{{r.Creator.name}}">{{r.Creator.name}}</a>
                                        {% _ "Created on" %} {{ r.create_datetime|cctimesince }} {% _ "ago" %}
                                    </p>
                                </div>
                            </div>
                        {% endifnotequal %}
                    {% endfor %}
                    </div>
                </fieldset>
                <fieldset>
                    <legend>{% _m "%0's Routes" route.Creator.name %}</legend>
                    <div class="routes_container">
                    {% for r in route.Creator.LatestRoutes %}
                        {% ifnotequal r.id route.id %}
                            <div class="r_row" >
                                <div class="preview_map">
                                    <a href="{% url routes.routesviews.showroute r.id %}">
                                        <img class="preview_img" src="{{ r.preview_url|safe }}" title="{{ r.name }}"/>
                                    </a>
                                </div>
                                <div class="r_name">
                                    <p>
                                        <a href="{% url routes.routesviews.showroute r.id %}">{{ r.name }}</a>
                                        {{ r.distance|divide:"1000"|_u|floatformat:"0" }} {{ unit.km_mile }}
                                    </p>
                                    <p>
                                        {% _ "By" %}
                                        <a href="{% url riders.ridersviews.userpage r.Creator.uid %}"
                                                title="{{r.Creator.name}}">{{r.Creator.name}}</a>
                                        {% _ "Created on" %} {{ r.create_datetime|cctimesince }} {% _ "ago" %}
                                    </p>
                                </div>
                            </div>
                        {% endifnotequal %}
                    {% endfor %}
                    </div>
                </fieldset>
            </div>
            <div id="details">
                <div id="details_directions"></div>
            </div>
            <div id="social_comments">
                <!-- UY BEGIN -->
                <div id="uyan_frame"></div>
                <!-- UY END -->
            </div>
            <script type="text/javascript">
            var uyan_config = {
                 'title':'{% _ "Routes" %} [{{ route.name }}] -- MagiCycles迈记网',
                 'pic':'{{ route.preview_url|safe }}'
            };
            </script>
            <script type="text/javascript" id="UYScript" src="http://v1.uyan.cc/js/iframe.js?UYUserId=1739828" async=""></script>
        </div>
    </div>
    <div class="clear"></div>
    <div id="add_comment_panel">
        <p id="comment_title"></p>
        <p id="category">
            <input type="radio" name="category" value="text" checked/>{% _ "Comment" %}
            <input type="radio" name="category" value="food"/>{% _ "Food" %}
            <input type="radio" name="category" value="lodging"/>{% _ "Lodging" %}
            <input type="radio" name="category" value="sights"/>{% _ "Sights" %}
        </p>
        <p>
            <textarea id="comment" name="comment" wrap="soft"></textarea>
        </p>
        <p>
            <span id="word_count_left"></span>
            <input type="button" id="save_comment" class="cmdbutton" value="{% _ 'Save' %}" />
            <input type="button" id="cancel" class="cmdbutton" value="{% _ 'Cancel' %}" />
        </p>
        <div id="add_photo_div">
            <form id="photo_upload_form" target="frame_submit" method="post" enctype="multipart/form-data">
                <input type="hidden" id="signature" name="signature" value=""/>
                <input type="hidden" id="photo_url" name="photo_url" value=""/>
                <input type="hidden" id="img_type" name="img_type" value="Photo"/>
                <p id="add_photo_button" class="yellowbutton">{% _ "Add Photo" %}</p>
                <input id="add_photo_input" type="file" name="file"/>
            </form>
            <div class="clear"></div>
            <img id="photo_img" src="/static/images/uploading.gif"/>
        </div>
    </div>
</div>
<iframe name="frame_submit" id="frame_submit"  style="display:none" width="0" height="0"></iframe>
{% endblock %}
